import React, {Component} from 'React';
import {NavLink,withRouter} from 'react-router-dom';
import axios from 'axios';
import './Nav.css';
import {BrowserRouter as Router, Route} from 'react-router-dom';
// import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import {syncHistoryWithStore, routerReducer} from 'react-router-redux'

import { Breadcrumb,Icon } from 'antd';

class Nav extends Component{

    // checkbox
        getInitialState() {
            return {
                checkValues: [],
            }
        }
        handleCheck(e){
            // e.preventDefault();

            // var formData = {
            //     input: this.refs['goodInput'].value,
            //     check: this.state.checkValues,
            // }
            // console.log(formData);
            // console.log(e.target)
        }
        handleCheck1(e) {
            var checkValues = this.state.checkValues.slice();
            var newVal      = e.target.value;
            var index       = checkValues.indexOf(newVal);
            if (index == -1) {
                checkValues.push(newVal)
            } else {
                checkValues.splice(index, 1);
            }

            this.setState({
                checkValues: checkValues,
            })
        }

    // 精确搜索
    constructor(props){
        super(props);
        this.state={
            list: [],
        }
    }

    componentWillMount(){
        axios({
            url   : `http://localhost:3000/people?_limit=16`,
            method: 'get'
        }).then(res=>{
            this.setState({
                list: [...res.data]
            })
            // console.log(this.state.list)
        })
    }
    componentWillUpdate(){
        axios({
            url   : `http://localhost:3000/people?_limit=16/${this.props.match.params.brand}/${this.props.match.params.classify}/${this.props.match.params.sortGoods}/${this.props.match.params.check}/${this.props.match.params.price}`,
            method: 'get'
        }).then(res=>{
            // this.setState({
            //     list: [...res.data]
            // })
            console.log(1)
        })
    }
    // 精确搜索-品牌
    // changePp=(e)=>{
    //     var _target  = e.target.getAttribute('data-type');
    //     var brand    = this.props.match.params.brand?_target:0;
    //     var classify = this.props.match.params.classify?this.props.match.params.classify:0;
    //     console.log(brand,classify)
    //     return this.state.list.map((item,index)=>{
    //         return(
    //                 <li key={index}>
    //                     <NavLink activeClassName="active" data-type={index} to={`/showProduct/${brand}/${classify}`}
    //                     onClick={e=>this.changePp(e)}>
    //                         {/*} <img src={this.state.list[index].img}/>*/}
    //                         {this.state.list[index].time}
    //                     </NavLink>
    //                 </li>
    //         )
    //     })
    // }

    //bread
    showBread=()=>{
        return this.state.list.map((item,index)=>{
            return(
                <Breadcrumb.Item key={index}><NavLink to=""> {this.state.list[index].title+"/"}</NavLink></Breadcrumb.Item>
            )
        })
    }

    // 品牌搜索
    showList=()=>{
        var brand     = this.props.match.params.brand?this.props.match.params.brand:0;
        var classify  = this.props.match.params.classify?this.props.match.params.classify:0;
        var sortGoods = this.props.match.params.sortGoods?this.props.match.params.sortGoods:0;
        var check     = this.props.match.params.check?this.props.match.params.check:0;
        var price     = this.props.match.params.price?this.props.match.params.price:0;
        // var minPrice  = this.props.match.params.minPrice?this.props.match.params.minPrice:0;
        // var maxPrice  = this.props.match.params.maxPrice?this.props.match.params.maxPrice:0;
        return this.state.list.map((item,index)=>{
            return(
                    <li key={index}>
                        <NavLink activeClassName="active" data-type={index} to={`/showProduct/${index}/${classify}/${sortGoods}/${check}/${price}`}
                        >
                            {/*} <img src={this.state.list[index].img}/>*/}
                            {this.state.list[index].time}
                        </NavLink>
                    </li>
            )
        })
    }

    // 精确搜索-分类
    showListFl=(e)=>{
        // console.log(this.props.match.params);
        var brand     = this.props.match.params.brand?this.props.match.params.brand:0;
        var classify  = this.props.match.params.classify?this.props.match.params.classify:0;
        var sortGoods = this.props.match.params.sortGoods?this.props.match.params.sortGoods:0;
        var check     = this.props.match.params.check?this.props.match.params.check:0;
        var price     = this.props.match.params.price?this.props.match.params.price:0;
        // var minPrice  = this.props.match.params.minPrice?this.props.match.params.minPrice:0;
        // var maxPrice  = this.props.match.params.maxPrice?this.props.match.params.maxPrice:0;

        return this.state.list.map((item,index)=>{
            return(
                <li key={index}>
                <nav>
                    <NavLink className="nav-item nav-link" activeClassName="active"  data-type={index} to={`/showProduct/${brand}/${index}/${sortGoods}/${check}`}>
                        {this.state.list[index].name}
                    </NavLink>
                </nav>
                </li>
            )
        })
    }

    //点击更多收起，切换
    componentDidMount(){
        $('.clickmore').click(function(){
            if($('.clickmore').html()=="更多"){
                $('.classify-pinpai').removeClass('maxheight');
                $('.clickmore').html('收起');
                $('.arrow').attr('type', 'up');
                $('.left-title-pp').removeClass('maxheight');
                var height = $('.classify-pinpai').height();
                $('.left-title-pp').height(height);
            }else{
                $('.classify-pinpai').addClass('maxheight');
                $('.clickmore').html('更多');
                $('.arrow').attr('type','down');
                $('.left-title-pp').addClass('maxheight');
            }
        })
        $('.clickmore-fl').click(function(){
            if($('.clickmore-fl').html()=="更多"){
                $('.classify-fenlei').removeClass('maxheight2');
                $('.clickmore-fl').html('收起');
                $('.arrow2').attr('type', 'up');
                $('.left-title-pp').removeClass('maxheight2');
                var height = $('.classify-fenlei').height();
                $('.fl-left-title').height(height);
            }else{
                $('.classify-fenlei').addClass('maxheight2');
                $('.clickmore-fl').html('更多');
                $('.arrow2').attr('type','down');
                $('.left-title-pp').addClass('maxheight2');
            }
        })
    }

    render(){
        // console.log(this.props.match)
        // var brand     = this.props.match.params.brand?this.props.match.params.brand:0;
        // var classify  = this.props.match.params.classify?this.props.match.params.classify:0;
        // var sortGoods = this.props.match.params.sortGoods?this.props.match.params.sortGoods:0;
        return(
            <div className="nav-box">
                <div className="nav">
                    <div className="breadcrumb">
                        <Breadcrumb>
                            <Breadcrumb.Item>首页</Breadcrumb.Item>
                            <Breadcrumb.Item><NavLink to='/'>{this.showBread()}</NavLink></Breadcrumb.Item>
                            {/*<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>*/}
                        </Breadcrumb>
                    </div>
                    <div className="nav-classify">
                        <div className="classify-pinpai maxheight">
                            <div className="left-title left-title-pp maxheight"><p>品牌</p></div>
                            <div className="mid-title pp-mid-title">
                                <ul>
                                    {this.showList()}
                                </ul>
                            </div>
                            <div className="right-title">
                                {/*<input type="button" value="+ 多选" onClick={this.handleCheck()}/>*/}
                                <div className="clickmore">更多</div>
                                <Icon className="arrow" type="down"/>
                            </div>
                        </div>
                        <div className="classify-fenlei maxheight2">
                            <div className="left-title fl-left-title "><p>分类</p></div>
                            <div className="fl-mid-title">
                                <ul>
                                    {this.showListFl()}
                                </ul>
                            </div>
                            <div className="right-title-fl">
                                <div className="clickmore-fl">更多</div>
                                <Icon className="arrow2" type="down"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            )
        }
    }


    export default withRouter(Nav)


